<template>
  <el-dialog :title="title" :visible="dialogAgent" @close="closeFn">
    <el-form ref="form" :model="agentForm" label-width="120px" :rules="rules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="agentForm.name" placeholder="请输入1~6位字符" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="agentForm.email" placeholder="请输入一个合法的邮箱地址" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="agentForm.phone" placeholder="11位字符" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="agentForm.address" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="agentForm.desc" placeholder="请输入1~100位字符" />
      </el-form-item>
      <!-- 经纪头像 -->
      <el-form-item label="封面">
        <ImageUpload ref="agentFormUpload" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeFn">取 消</el-button>
      <el-button
        type="primary"
        @click="comfirmFn"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addAgents, editAgents, assignAgents } from '@/api/agents'
export default {
  props: {
    dialogAgent: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      require: true,
      default: '添加经纪'
    }
  },
  data() {
    const validateEmail = (rules, value, callback) => {
      const reg = /^\w+@\w{2,}[.]\w{2,4}$/
      if (reg.test(value)) {
        return callback()
      } else {
        callback(new Error('请输入一个合法的邮箱地址'))
      }
    }

    return {
      formLabelWidth: '180px',
      agentForm: {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: '' // 封面图
      },
      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 1, max: 6, message: '1~6位字符', trigger: 'blur' }
        ],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }],
        phone: [{ required: true, message: '邮箱不能为空', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }],
        address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
        desc: [{ required: true, message: '描述不能为空', trigger: 'blur' },
          { min: 1, max: 100, message: '1~6位字符', trigger: 'blur' }]

      }
    }
  },
  methods: {
    // 点击取消按钮和X
    closeFn() {
      this.$emit('update:dialogAgent', false)
      // 清空表单数据
      this.agentForm = {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: '' // 封面图
      }
      // 清空头像
      this.$refs.agentFormUpload.fileList = []
    },

    // 点击确定按钮
    async  comfirmFn() {
      // 验证表单信息
      // await this.$refs.form.validate()

      // 获取头像在线地址
      // 添加判断，防止用户在未上传成功时，点击确认按钮
      const file = this.$refs.agentFormUpload.fileList[0]
      if (file && file.status !== 'success') {
        return this.$message.warning('图片未上传成功，请等待')
      }
      const url = file.url

      if (!this.agentForm.id) {
        // 添加经纪
        await addAgents({
          ...this.agentForm,
          image: file ? url : ''
        })
        // 轻提示
        this.$message.success('添加经纪成功')
      } else {
        await editAgents({
          ...this.agentForm,
          image: file ? url : ''
        })

        // 轻提示
        this.$message.success('修改经纪成功')
      }

      // 关闭弹窗
      this.closeFn()

      // 让父组件重新刷新
      this.$emit('refresh')
    },

    // 回显数据
    async  getAssignAgents(id) {
      const res = await assignAgents(id)
      console.log('回显经纪个人信息', res)
      this.agentForm = res
      // console.log(106, this.agentForm)
      this.$refs.agentFormUpload.fileList.push({ url: res.image })
    }

  }
}
</script>

<style>
</style>
